<template>
  <div ref="chart" style="width: 65vw; height: 300px"></div>
</template>

<script setup>
import { ref, onMounted } from "vue";
import * as echarts from "echarts";

const chart = ref(null);

onMounted(() => {
  const myChart = echarts.init(chart.value);

  const option = {
    title: {
      text: "设备状态比例",
      left: "center",
    },
    tooltip: {
      trigger: "item",
    },
    legend: {
      orient: "vertical",
      left: "left",
    },
    series: [
      {
        name: "设备状态",
        type: "pie",
        radius: "50%",
        data: [
          { value: 735, name: "在线" },
          { value: 580, name: "离线" },
          { value: 484, name: "故障" },
        ],
        emphasis: {
          itemStyle: {
            shadowBlur: 10,
            shadowOffsetX: 0,
            shadowColor: "rgba(0, 0, 0, 0.5)",
          },
        },
        
      },
    ],
  };

  myChart.setOption(option);
});
</script>

<style scoped>
/* 添加一些样式以适应图表 */
</style>
